<template>
  <div class="project-detail-wrap">
    <!-- 子节点点击 -->
    <div class="project-detail">
      <div class="project-detail-tools">
        <div class="info-screen">
          <el-form :inline="true" :model="searchForm" @submit.prevent class="demo-form-inline">
            <el-form-item label="项目名称">
              <el-input
                v-model="searchForm.projectName"
                placeholder="请输入项目名称"
                style="width: 200px"
                clearable
                @keyup.enter="handleQuery"
                @clear="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
              <el-button type="warning" :icon="Refresh" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="view-type">
          <el-popover trigger="click" popper-class="more-operation-popover">
            <div class="btn" @click="handleAddProject('item')">项目</div>
            <div class="btn" @click="handleAddProject('set')">项目集</div>
            <template #reference>
              <el-button type="primary" :icon="Plus">创建</el-button>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="project-detail-content">
        <el-table
          v-if="shwoProject"
          v-loading="loading"
          class="elTable"
          ref="tableRef"
          :data="projectList"
          row-key="projectId"
          default-expand-all
          :indent="20"
          height="100%"
          :row-class-name="rowCustom"
          :cell-class-name="cellCustom"
          :header-cell-class-name="headerCellCustom"
          :header-cell-style="tabelHeaderCellStyle">
          <el-table-column prop="projectName" label="名称" width="400" show-overflow-tooltip>
            <template #default="{ row }">
              <el-button v-if="row.projectType" link type="primary" size="small" @click="toTask(row)">
                {{ row.projectName }}
              </el-button>
              <span v-else>
                {{ row.projectName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="projectCode" label="项目编码" />
          <el-table-column prop="projectCode" label="项目类型">
            <template #default="{ row }">
              {{ dict.translate('task_project_type', row.projectType) }}
            </template>
          </el-table-column>
          <el-table-column prop="projectClass" label="项目分类">
            <template #default="{ row }">
              {{ dict.translate('task_project_class', row.projectClass) }}
            </template>
          </el-table-column>
          <el-table-column label="任务数量">
            <template #default="{ row }">
              <span v-if="row.projectType">{{ row.infoCount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划开始时间" width="180">
            <template #default="{ row }">
              <span v-if="row.planBegin">
                {{ dayjs(row.planBegin).format('YYYY-MM-DD') }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="计划结束时间" width="180">
            <template #default="{ row }">
              <span v-if="row.planEnd">
                {{ dayjs(row.planEnd).format('YYYY-MM-DD') }}
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <HandleProject ref="projectDialogRef" @refresh="getProjectList"></HandleProject>
    <ProjectSetting
      v-model="settingVisible"
      :projectId="projectInfo.projectId"
      :projectFolderId="projectInfo.projectFolderId"
      @refresh="refresh"></ProjectSetting>
  </div>
</template>

<script setup>
import { Search, FolderAdd, Refresh, Plus } from '@element-plus/icons-vue'
import { getTcTaskProjectList, deleteProject } from '@/assets/api/project'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
import { useDictionary } from '@/use/use-dictionary'
import dayjs from 'dayjs'
const dict = useDictionary(['task_project_type', 'task_project_class', 'task_edit_mode'])

provide('getProjectList', getProjectList)

const props = defineProps({
  handleNodeClick: {
    type: Function,
  },
})

const emit = defineEmits(['refresh', 'toTask'])

const route = useRoute()
const router = useRouter()

const searchForm = ref({})

const projectList = ref([])

const loading = ref(false)
function getProjectList() {
  loading.value = true
  getTcTaskProjectList(searchForm.value).then((res) => {
    if (res.code === 200) {
      projectList.value = res.rows
      loading.value = false
    } else {
      loading.value = false
      ElMessage.error(res.msg)
    }
  })
}

function handleQuery() {
  getProjectList()
}
function handleReset() {
  searchForm.value = {}
  getProjectList()
}

const shwoProject = ref(true)
function toTask(data) {
  emit('toTask', data)
}

const settingVisible = ref(false)
const projectInfo = ref({})
function handleEdit(data) {
  if (!data.projectType) {
    projectDialogRef.value.open(data.projectId, 'set')
  } else {
    props.handleNodeClick(data)
    projectInfo.value = data
    settingVisible.value = true
  }
}

function handleDelete(data) {
  ElMessageBox.confirm(`确定要删除项目${data.projectType ? '' : '集'}【${data.projectName}】吗?`, '删除确认', {
    cancelButtonText: '取消',
    confirmButtonText: '确认',
    type: 'warning',
  })
    .then(() => {
      deleteProject(data.projectId).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除成功')
          getProjectList()
        } else {
          ElMessage.error(res.msg)
        }
      })
    })
    .catch(() => {})
}

function refresh() {
  projectInfo.value = {}
  props.handleNodeClick()
  getProjectList()
}

const projectDialogRef = ref()
function handleAddProject(type) {
  projectDialogRef.value.open(null, type)
}

function rowCustom({ row, column, rowIndex, columnIndex }) {
  if (!row.projectType) {
    return 'project-group'
  }
}
function cellCustom({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0 && !row.projectType) {
    return 'project-group-name'
  }
}
function headerCellCustom({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    return `header-first`
  }
}
function tabelHeaderCellStyle() {
  return { 'background-color': 'var(--elp-color-info-light-9)', color: 'var(--elp-color-black)' }
}
onMounted(() => {
  getProjectList()
})
</script>

<style scoped lang="scss">
.project-detail-wrap {
  height: 100%;
}

.project-detail {
  height: 100%;
  // @include use-flex(normal, normal, column);
  .project-detail-tools {
    height: 50px;
    @include use-flex(normal, space-between);
    // padding-bottom: 18px;
    // padding-top: 24px;
    .info-screen {
      // display: flex;
      // align-items: center;
      padding-left: 30px;
      @include use-flex(center, normal);
      flex: 1;
      .task-total {
        font-size: 16px;
        color: var(--elp-text-color-secondary);
        margin-right: 40px;
      }
      .project-search {
        width: 250px;
      }
      .elp-select + .elp-select,
      .elp-select + .elp-button {
        margin-left: 24px;
      }
    }
  }
  .project-detail-content {
    height: calc(100% - 50px);
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--elp-bg-color);
    border-radius: var(--elp-border-radius-base);
    .view-type {
      @include use-flex(normal, center);
      margin-left: 10px;
      .project-add {
        height: 32px;
        border: var(--elp-border);
        border-radius: 8px;
        margin-right: 10px;
        padding: 5px;
        cursor: pointer;
        &:hover {
          background-color: var(--elp-fill-color);
        }
      }
    }
  }
}
:deep(.elp-table) {
  .cell {
    border-left: none;
    height: 100%;
    @include use-flex(center, normal, row);
    span {
      cursor: pointer;
      @include use-flex(center, normal, row);
    }
    .elp-table__expand-icon {
      width: 3em;
    }
    .elp-table__expand-icon > .elp-icon {
      width: 3em;
      height: 1.5em;
      background-image: url('~@/assets/image/project/tree-arrow-right.png'),
        url('~@/assets/image/project/tree-open.png');
      background-repeat: no-repeat no-repeat;
      background-position:
        left center,
        right center;
      background-size: 16px 14px;
    }
    .elp-table__expand-icon > .elp-icon svg {
      width: 0;
      height: 0;
    }
    /*有子节点 且已展开*/
    .elp-table__expand-icon--expanded > .elp-icon {
      width: 3em;
      height: 1.5em;
      background-image: url('~@/assets/image/project/tree-arrow-down.png'),
        url('~@/assets/image/project/tree-close.png');
      background-repeat: no-repeat no-repeat;
      background-position:
        left center,
        right center;
      background-size: 16px 14px;
    }
  }
  // .project-group-name {
  //   .cell {
  //     .elp-table__placeholder {
  //       width: 1.8em;
  //       height: 1.5em;
  //       background: url('~@/assets/image/project/tree-close.png') no-repeat;
  //       background-size: 100% 100%;
  //     }
  //   }
  // }
  .elp-table__expand-icon--expanded,
  .elp-table__expand-icon {
    transform: rotate(0deg);
    width: 15px;
    height: 15px;
    line-height: 8px;
    margin-right: 10px;
  }
}
</style>
